---
title: Vue
description: Vue.js-kohtaiset linttaussäännöt Ultraciteä varten.
---

Vue-konfiguraatio sisältää Vue.js-kohtaisia linttaussääntöjä komponenttirakenteelle, data-asetuksille, computed-ominaisuuksille ja varatuille avainsanoille. Se sisältää myös ylikirjoituksia estämään väärät positiiviset linttausvirheet `.vue`-tiedostoissa.

## Asennus

Lisää Vue-konfiguraatio `biome.jsonc`-tiedostoosi:

```jsonc title="biome.jsonc"
{
  "extends": ["ultracite/core", "ultracite/vue"]
}
```

## Yleiskatsaus

Tämä konfiguraatio lisää Vue.js-kehitykseen liittyviä sääntöjä:

- **HTML-tuki**: Ota käyttöön kokeellinen täydellinen HTML-tuki sekä skriptien ja tyylien sisennys
- **Komponenttien nimeäminen**: Pakottaa monisanaiset komponenttinimet
- **Datan rakenne**: Estää virheelliset `data`-asetuksen ilmoitukset
- **Varatut avainsanat**: Estää Vue:n varattujen propsien ja avainten käytön
- **Kaksoisavaimet**: Estää duplikaattiavaimet komponenttien asetuksissa
- **React-spesifiset propsit**: Estää React-spesifisten propsien käytön Vue-komponenteissa
- **Vue-tiedostojen ylikirjoitukset**: Lievemmät säännöt `.vue`-tiedostoille Single File Component -rakenteen käsittelyä varten

## HTML-muotoilijan asetukset

Vue-preset ottaa käyttöön kokeellisen HTML-tuen, jossa on erikoismuotoilu upotetuille skripteille ja tyyleille:

```jsonc
{
  "html": {
    "experimentalFullSupportEnabled": true,
    "formatter": {
      "indentScriptAndStyle": true
    }
  }
}
```

Tämä konfiguraatio:
- **Kokeellinen täydellinen tuki**: Ota käyttöön Biomen kokeellinen HTML-jäsennys ja -muotoilu `.vue`-tiedostoille
- **Sisennä skripti ja tyyli**: Sisentää oikein koodin `<script>`- ja `<style>`-tagejen sisällä Vue Single File Component -tiedostoissa

## Vue-kohtaiset säännöt

### Kehitysvaihe

| Sääntö | Asetus | Kuvaus |
|-------|--------|--------|
| `noVueDataObjectDeclaration` | `error` | Estä `data`-asetuksen objektinilmoituksen käyttäminen Vue-komponenteissa. `data`-asetuksen on oltava funktio, joka palauttaa objektin. |
| `noVueDuplicateKeys` | `error` | Estä kaksoisavaimet Vue-komponenttien asetuksissa. Avainarvojen `data`, `computed`, `methods` jne. on oltava yksilöllisiä. |
| `noVueReservedKeys` | `error` | Estä Vue:n varattujen avainten kuten `$data`, `$props`, `$el` jne. käyttö komponenttien asetuksissa. |
| `noVueReservedProps` | `error` | Estä Vue:n varattujen propsien kuten `key`, `ref` ja `is` käyttö mukautettuina komponenttipropsina. |
| `noVueVIfWithVFor` | `error` | Estä `v-for`- ja `v-if`-direktiivien käyttö samalla elementillä. |
| `useVueHyphenatedAttributes` | `error` | Kannusta käyttämään kebab-casea attribuuttien nimissä Vue-tyyliohjeen suositusten mukaisesti. |
| `useVueMultiWordComponentNames` | `error` | Pakota monisanaiset komponenttien nimet välttämään ristiriitoja HTML-elementtien kanssa. Yksisanaisia nimiä kuten `Button` tai `Card` tulisi välttää. |
| `useVueValidVBind` | `error` | Varmistaa `v-bind`-direktiivien pätevyyden Vue-tiedostoissa. |
| `useVueValidVElseIf` | `error` | Varmistaa `v-else-if`-direktiivien pätevyyden Vue-templaatissa. Raportoi virheellisistä direktiiveistä, joilla puuttuu ehdollinen lauseke tai joita ei edeltä `v-if`- tai `v-else-if`-direktiivi. |
| `useVueValidVElse` | `error` | Varmistaa `v-else`-direktiivien pätevyyden Vue-templaatissa. Raportoi direktiivit, joita ei edeltää `v-if`- tai `v-else-if`-direktiivi. |
| `useVueValidVHtml` | `error` | Varmistaa `v-html`-direktiivin oikean käytön Vue-templaatissa. Raportoi direktiivit, joilta puuttuu lauseke, joilla on odottamattomia argumentteja tai odottamattomia modifioijia. |
| `useVueValidVIf` | `error` | Varmistaa `v-if`-direktiivien pätevyyden Vue-templaatissa. Kieltää argumentit ja modifioijat sekä varmistaa, että arvo on annettu. |
| `useVueValidVOn` | `error` | Varmistaa `v-on`-direktiivien pätevyyden Vue-templaatissa. Raportoi virheelliset `v-on`-/lyhennetyt `@`-direktiivit, joilta puuttuu tapahtuman nimi, jotka sisältävät virheellisiä modifioijia tai joilta puuttuu käsittelijän lauseke. |
| `useVueValidVText` | `error` | Varmistaa `v-text`-direktiivien pätevyyden Vue-templaatissa. Sääntö raportoi, kun `v-text`-direktiivillä on argumentti, modifioijia tai kun arvo puuttuu. |

### Epäilyttävät

| Sääntö | Asetus | Kuvaus |
|-------|--------|--------|
| `noReactSpecificProps` | `error` | Estää React-spesifisten proppien kuten `className` ja `htmlFor` käytön Vue:ssa. Käytä sen sijaan `class` ja `for`. |

## Vue-tiedostojen ylikirjoitukset

Seuraavat säännöt on poistettu käytöstä `.vue`-tiedostoissa väärien positiivisten varoitusten estämiseksi Biomen osittaisen tuen vuoksi Vue Single File Componenteille:

### Oikeellisuus

| Sääntö | Asetus | Kuvaus |
|-------|--------|--------|
| `noUnusedVariables` | `off` | Salli käyttämättömät muuttujat `.vue`-tiedostoissa. Skriptiosiossa määritellyt muuttujat voivat olla käytössä vain templaattiosiossa. |
| `noUnusedImports` | `off` | Salli käyttämättömät importit `.vue`-tiedostoissa. Importit voivat olla käytössä vain templaattiosiossa. |

### Tyyli

| Sääntö | Asetus | Kuvaus |
|-------|--------|--------|
| `useConst` | `off` | Salli `let`- ja `var`-määrittelyt `.vue`-tiedostoissa reaktiivisia data-käytäntöjä varten. |
| `useImportType` | `off` | Poista eksplisiittisten import type -vaatimusten pakko käytöstä paremman yhteensopivuuden vuoksi Vuen build-järjestelmän kanssa. |